<template>
    <div>
        <Dialog v-model="dialogVisible1" title="成绩导入结果通知" width="520">
            <div class="message_p">
                <p>{{props.tableData.success!=null?props.tableData.success.length:0}}位人选成绩导入成功，{{props.tableData.fail!=null?props.tableData.fail.length:0}}位人选成绩导入失败</p>
                <el-table :data="props.tableData.fail" style="width: 100%">
                    <el-table-column prop="userName" label="姓名"  />
                    <el-table-column prop="idNumber" label="身份证号" />
                    <el-table-column prop="score" label="分数"  />
                </el-table>
                <div class="flex jcfe aic" style="width: 100%;">
                    <el-button type="primary" @click="DialogClose()">我知道了</el-button>
                </div>
            </div>
        </Dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { Dialog } from '@/components/Dialog'
import { ElButton } from 'element-plus'
const dialogVisible1 = ref(false)
const loading = ref(false)
const emit = defineEmits(['penClick'])
const props = defineProps({
    tableData: {
        type: Object,
        default: () => {
            return {}
        }
    }

})
const state = reactive({
    form: {} as any,
})
const DialogOpen = () => {
    state.form = {}
    dialogVisible1.value = true
}
const DialogClose = () => {
    dialogVisible1.value = false
}

// 暴露方法
defineExpose({
    DialogOpen,
    DialogClose
})
</script>
<style lang="less">
.el-dialog__header {
    padding: 10px;
    border-bottom: 1px solid #D8D8D8;
}

.el-dialog__body {
    padding: 20px;
}
</style>
<style lang="less" scoped>
.message_p {
    padding: 0px 10px 20px 10px;
}

.el-button {
    margin-top: 20px;
    width: 134px;
    height: 40px;
}
</style>